<template>
  <div class="image-uploader">
    <!-- 图片预览区域 -->
    <div v-if="imageUrl" class="image-preview">
      <img :src="imageUrl" alt="预览图片" />
      <div class="preview-actions">
        <van-button size="mini" type="primary" @click="selectImage">
          更换图片
        </van-button>
        <van-button size="mini" type="danger" @click="removeImage">
          删除图片
        </van-button>
      </div>
    </div>

    <!-- 上传区域 -->
    <div v-else class="upload-area" @click="selectImage">
      <div class="upload-content">
        <van-icon name="photograph" size="32" color="#ddd" />
        <p class="upload-text">点击上传图片</p>
        <p class="upload-hint">支持 JPG、PNG、GIF 格式，大小不超过 5MB</p>
      </div>
    </div>

    <!-- 隐藏的文件输入框 -->
    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="handleFileSelect"
    />

    <!-- 上传进度 -->
    <van-progress
      v-if="uploading"
      :percentage="uploadProgress"
      stroke-width="4"
      color="#1989fa"
      class="upload-progress"
    />
  </div>
</template>

<script setup>
import { ref, watch,defineEmits,defineProps} from "vue";
import { showToast } from "vant";

// Props
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  }
});

// Emits
const emit = defineEmits(['update:modelValue']);

// 响应式数据
const fileInput = ref(null);
const imageUrl = ref(props.modelValue);
const uploading = ref(false);
const uploadProgress = ref(0);

// 监听 props 变化
watch(() => props.modelValue, (newValue) => {
  imageUrl.value = newValue;
});

// 监听 imageUrl 变化，向父组件发送更新
watch(imageUrl, (newValue) => {
  emit('update:modelValue', newValue);
});

// 选择图片
const selectImage = () => {
  fileInput.value?.click();
};

// 处理文件选择
const handleFileSelect = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    showToast('请选择图片文件');
    return;
  }

  // 验证文件大小（5MB）
  if (file.size > 5 * 1024 * 1024) {
    showToast('图片大小不能超过 5MB');
    return;
  }

  // 读取文件并预览
  const reader = new FileReader();
  reader.onload = (e) => {
    imageUrl.value = e.target.result;
  };
  reader.readAsDataURL(file);

  // 模拟上传进度
  simulateUpload();
};

// 模拟上传进度
const simulateUpload = () => {
  uploading.value = true;
  uploadProgress.value = 0;

  const interval = setInterval(() => {
    uploadProgress.value += 10;
    if (uploadProgress.value >= 100) {
      clearInterval(interval);
      uploading.value = false;
      uploadProgress.value = 0;
      showToast('图片上传成功');
    }
  }, 100);
};

// 删除图片
const removeImage = () => {
  imageUrl.value = '';
  if (fileInput.value) {
    fileInput.value.value = '';
  }
};
</script>

<style lang="scss" scoped>
.image-uploader {
  width: 100%;
}

.image-preview {
  position: relative;
  width: 100%;
  max-width: 200px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;

  img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
  }

  .preview-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover .preview-actions {
    opacity: 1;
  }
}

.upload-area {
  width: 100%;
  max-width: 200px;
  height: 120px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #fafafa;

  &:hover {
    border-color: #1989fa;
    background: #f0f8ff;
  }
}

.upload-content {
  text-align: center;
  padding: 16px;
}

.upload-text {
  margin: 8px 0 4px 0;
  font-size: 14px;
  color: #666;
}

.upload-hint {
  margin: 0;
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.upload-progress {
  margin-top: 12px;
}
</style>